<script setup lang="ts">
import { reactive, toRef } from 'vue';

interface Person {
    name:string;
    gender:string;
    age:number;
}

// 创建一个响应式对象
let person = reactive<Person>({
    name: "abcque",
    gender: "M",
    age: 18,
})

setInterval(
    () => {
        // 访问响应式对象可以直接访问属性
        person.age = person.age + 1
    }, 
    1000);

    // 将响应式对象转换成响应式数据
    let name = toRef<Person, "name">(person, "name")
    let gender = toRef<Person, "gender">(person, "gender")
    let age = toRef<Person, "age">(person, "age")

</script>

<template>
    <!-- <h1>姓名:{{ person.name }}</h1>
    <h1>性别:{{ person.gender }}</h1>
    <h1>年龄:{{ person.age }}</h1> -->
    <h1>姓名:{{ name }}</h1>
    <h1>性别:{{ gender }}</h1>
    <h1>年龄:{{ age }}</h1>
</template>

<style scoped></style>